<template>
	<div>
		<!-- <div class="dashboard-text">欢迎来到尘缘订单管理系统</div> -->
		<div>
			<el-carousel :interval="4000" type="card" height="350px">
				<el-carousel-item v-for="(item,index) in pictureData" :key="index">
					<img :src="item" style="width: 80%;padding-left: 15%;"></img>
				</el-carousel-item>
			</el-carousel>
		</div>
		<div>
			<span style="font-size: 35px;text-align: center;padding-left: 10%;">
				尘缘订单管理，服装店专属的全渠道营销订单平台
			</span>
		</div>
		<br />
		<div style="height: 250;">
			<el-row>
				<el-col :span="9">
					<div>
						<br />
						<span style="text-align: center;padding-left: 5%;margin: 10px;">
							尘缘订单管理在每个季度都会推出很多新鲜潮流的服饰，能够让客户有更多的选择。以订单处理为核心，帮助企业快速构建专属的全渠道营销订单平台。
							企业通过平台可以全面展示商品，快速引流客户，提升内外部协同效率，数据驱动获取更多利润。
							从而增加客户、提升销量，降低成本、加速资金流转。助力销售模式变革，让生意更简单！
						</span>
					</div>
				</el-col>
				<el-col :span="15">
					<div><img style="width: 80%;height: 250px;padding-left: 10%;" src="http://img009.hc360.cn/m7/M01/5B/8E/wKhQo1VYst2ECa4AAAAAAOrdV5M599.jpg" /> </div>
				</el-col>
			</el-row>

		</div>

		<div>
			<el-row>
				<el-col :span="11" :offset="1">
					<el-card shadow="hover" style="width: 100%;text-align: left;font-size:15px;height:auto;position: relative">
						<img style="width: 100%;" src="//img11.360buyimg.com/n1/s350x449_jfs/t1/21396/23/9659/59559/5c821637Eb83e6542/4476f9a0286cb85f.jpg!cc_350x449.jpg"
						 class="image" width="100%">

					</el-card>
					<div style="width: 20px;height: 20px"></div>
				</el-col>
				<el-col :span="11" :offset="1">
					<el-card shadow="hover" style="width: 100%;text-align: left;font-size:15px;height:auto;position: relative">
						<img style="width: 100%;" src="//img11.360buyimg.com/n1/s350x449_jfs/t23227/364/563970243/84451/d560de99/5b35f1edNaad3a1e1.jpg!cc_350x449.jpg"
						 class="image" width="100%">

					</el-card>
					<div style="width: 20px;height: 20px"></div>
				</el-col>
				<el-col :span="11" :offset="1">
					<el-card shadow="hover" style="width: 100%;text-align: left;font-size:15px;height:auto;position: relative">
						<img style="width: 100%;" src="//img14.360buyimg.com/n1/s350x449_jfs/t24082/2/1299977890/175608/51cdd529/5b592920N191aadbb.jpg!cc_350x449.jpg"
						 class="image" width="100%">

					</el-card>
					<div style="width: 20px;height: 20px"></div>
				</el-col>
				<el-col :span="11" :offset="1">
					<el-card shadow="hover" style="width: 100%;text-align: left;font-size:15px;height:auto;position: relative">
						<img style="width: 100%;" src="//img14.360buyimg.com/n1/s350x449_jfs/t1/20253/8/3223/130500/5c25c38bE989f54ad/2b69f90af5238090.jpg!cc_350x449.jpg"
						 class="image" width="100%">

					</el-card>
					<div style="width: 20px;height: 20px"></div>
				</el-col>
				<el-col :span="11" :offset="1">
					<el-card shadow="hover" style="width: 100%;text-align: left;font-size:15px;height:auto;position: relative">
						<img style="width: 100%;" src="//img11.360buyimg.com/n1/s350x449_jfs/t1/10815/26/9641/74089/5c440f67E72b2f8f0/5ff07984ab0a388f.jpg!cc_350x449.jpg"
						 class="image" width="100%">

					</el-card>
					<div style="width: 20px;height: 20px"></div>
				</el-col>
				<el-col :span="11" :offset="1">
					<el-card shadow="hover" style="width: 100%;text-align: left;font-size:15px;height:auto;position: relative">
						<img style="width: 100%;" src="//img12.360buyimg.com/n1/s350x449_jfs/t1/18643/4/11441/67588/5c8f29d3E3286a65e/5abff43752a1da09.jpg!cc_350x449.jpg"
						 class="image" width="100%">

					</el-card>
					<div style="width: 20px;height: 20px"></div>
				</el-col>
			</el-row>
		</div>
		<!-- <div id="linechart"  style="width: 100%;height: 350%;"></div>
		<span style="font-size: 30px;padding-left: 30%;">商品销售统计图</span> -->
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		get_order_goods_statisticsgoods
	} from '../../api/report.js'
	let echarts = require('echarts')
	// 引入柱状图组件
	require('echarts/lib/chart/bar')
	// 引入提示框和title组件
	require('echarts/lib/component/tooltip')
	require('echarts/lib/component/title')
	require('echarts/lib/component/polar')
	export default {
		name: 'dashboard',
		data() {
			return {
				ordergoodsData: [],
				startandend: [],
				legendData: [],
				serieslineData: [],
				chartsorderData: [],
				pictureData: [
					'//img11.360buyimg.com/n1/s350x449_jfs/t1/21396/23/9659/59559/5c821637Eb83e6542/4476f9a0286cb85f.jpg!cc_350x449.jpg',
					'//img11.360buyimg.com/n1/s350x449_jfs/t1/21520/37/9258/58388/5c7de8ddE9c56181d/0857b3b6be4d035a.jpg!cc_350x449.jpg',
					'//img12.360buyimg.com/n1/s350x449_jfs/t1/32534/31/4392/140223/5c7cd097E33c88e06/3ac5ac4d6654c81a.jpg!cc_350x449.jpg',
					'//img12.360buyimg.com/n1/s350x449_jfs/t1/18643/4/11441/67588/5c8f29d3E3286a65e/5abff43752a1da09.jpg!cc_350x449.jpg',
					'//img11.360buyimg.com/n1/s350x449_jfs/t1/10815/26/9641/74089/5c440f67E72b2f8f0/5ff07984ab0a388f.jpg!cc_350x449.jpg',
					'//img14.360buyimg.com/n1/s350x449_jfs/t1/23113/11/5884/60246/5c44080bE89f31718/3d58826fb2b2ba52.jpg!cc_350x449.jpg'
				]
			};
		},
		computed: {
			...mapGetters([
				'name',
				'roles'
			])
		},
		mounted: function() {
			this.showlinecharts();
		},
		methods: {
			get_order_goods_statisticsgoodsData() {
				get_order_goods_statisticsgoods({
					parameter: this.startandend[0],
					parameter2: this.startandend[1]
				}).then(response => {
					this.ordergoodsData = response;
					console.log(this.ordersData, ' this.ordersData')
					for (let i = 0; i < this.ordergoodsData.length; i++) {
						if (this.legendData.indexOf(this.ordergoodsData[i].goods_name) == -1) {
							this.legendData.push(this.ordergoodsData[i].goods_name);
							this.chartsorderData.push({
								value: this.ordergoodsData[i].数量,
								name: this.ordergoodsData[i].goods_name
							});
						} else {
							for (let j = 0; j < this.chartsorderData.length; j++) {
								if (this.chartsorderData[j].name == this.ordergoodsData[i].goods_name) {
									this.chartsorderData[j].value = this.chartsorderData[j].value + this.ordergoodsData[i].数量;
								}
							}
						}
					}
					for (let j = 0; j < this.chartsorderData.length; j++) {
						this.serieslineData.push(this.chartsorderData[j].value);
					}
					this.showlinecharts();
					console.log(this.legendData, this.serieslineData, ' this.serieslineData')
				})
			},
			showlinecharts: function() {
				let chart_option = {
					toolbox: {
						feature: {
							saveAsImage: {
								pixelRatio: 2
							}
						}
					},
					color: ['#3398DB'],
					tooltip: {
						trigger: 'axis',
						axisPointer: { // 坐标轴指示器，坐标轴触发有效
							type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [{
						type: 'category',
						data: this.legendData,
						axisTick: {
							alignWithLabel: true
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					series: [{
						name: '销量',
						type: 'bar',
						barWidth: '60%',
						data: this.serieslineData
					}]
				}
				let myChart = echarts.init(document.getElementById('linechart'))
				myChart.setOption(chart_option)
			},
		},
		created() {
			let date = new Date();
			let startdate = '';
			let nowdate = '';
			startdate = (date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() +
				1)) + '-' + '01').toString();
			nowdate = (date.getFullYear() + '-' + ((date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() +
				1)) + '-' + ((date.getDate()) < 10 ? '0' + (date.getDate()) : (date.getDate()))).toString();
			this.startandend.push(startdate);
			this.startandend.push(nowdate);
			this.get_order_goods_statisticsgoodsData();
		}
	}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.dashboard {
		&-container {
			margin: 30px;
		}

		&-text {
			font-size: 30px;
			line-height: 46px;
		}
	}
</style>
<style>
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #FFFFFF;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #FFFFFF;
	}
</style>
